<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知领互联银行汇款转账交易系统</title>
    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="../bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="../bootstrap/js/bootstrap.min.js"></script>


    <style scoped>
        * {
            padding:0;
            margin:0;
        }

        li.active {
            background-color: #333;
        }
        .box {
            width:100%;
            height:300px;
            margin:0px auto;
            position:relative;
            overflow:hidden;
        }
        .swiper li {
            list-style:none;
            width:100%;
            height:300px;
        }
        .dot li {
            list-style:none;
            width:100%;
            height:300px;
        }
        .swiper img {
            width:100%;
            height:100%;
            vertical-align:top;
        }
        .swiper {
            width:500%;
            height:300px;
            position:absolute;
            left:0;
            top:0;
        }
        .swiper li {
            width:20%;
            float:left;
        }
        .swiper li img {
            width:100%;
        }
        .dot {
            position:absolute;
            display:flex;
            right:50%;
            bottom:0;
            transform:translate(50%,0);
            margin-bottom:8px;
        }
        .dot li {
            width:15px;
            height:15px;
            border-radius:50%;
            background-color:#fff;
            margin-right:5px;
        }
        .dot .active {
            background-color:burlywood;
        }
        .left,.right {
            font-family: "宋体";
            width:60px;
            height:60px;
            background-color:rgba(0,0,0,0.6);
            position:absolute;
            top:50%;
            transform:translate(0,-50%);
            color:yellowgreen;
            font-size:50px;
            text-align:center;
            line-height:60px;
            cursor:pointer;
        }
        .right {
            right:0;
        }
    </style>


</head>
<body  >

<!--<div ng-include=" 'lunbo3.html' "></div>-->
<div>
<!--轮播图-->
<div class="box">
    <ul class="swiper">
        <li class="active"><img src="../imgs/ind1.jpg" alt="First slide"></li>
        <li><img src="../imgs/ind2.jpg" alt="First slide"></li>
        <li><img src="../imgs/ind3.jpg" alt="First slide"></li>
        <li><img src="../imgs/ind4.jpg" alt="First slide"></li>
        <li class="active"><img src="../imgs/ind1.jpg" alt="First slide"></li>
    </ul>
    <ul class="dot">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="left">
        &lt;</div>
    <div class="right">&gt;</div>
</div>


<div>
    <img src="../imgs/ind1.png">
</div>


</div>
<script>

    $(function() {
        var index = 0; // 设置全局的轮播下标
        var timer = null; // 记录定时器的编号
        // 获取大盒子box的宽度
        var boxWidth = $(".box").width();
        console.log(boxWidth);

        // 启动定时器
        autoPlay();

        // 小圆点点击事件
        $(".dot li").click(function() {
            console.log(this);
            // active显示在点击的小圆点上
            $(this).addClass("active").siblings().removeClass("active");
            // 获取小圆点的下标
            index = $(this).index();
            console.log(index);
            // 显示对应下标的图片
            $(".swiper").css({
                left: -boxWidth * index
            })
        })

        // 上翻页
        $(".left").click(function() {
            // 限流
            if ($(".swiper").is(":animated")) {
                return false;
            }
            // 点击一下，图片下标-1
            index--;
            move();
        })
        // 下翻页
        $(".right").click(function() {
            console.log($(".swiper").is(":animated"));
            if ($(".swiper").is(":animated")) {
                return false;
            }
            index++;
            move();
        })


        // 封装自动播放的函数
        function autoPlay() {
            // 启动前先清除定时器
            clearInterval(timer);
            // 设置定时器
            timer = setInterval(function() {
                index++;
                move();
            }, 5000)
        }

        // 封装联合图移动的函数
        function move() {
            // 移动到临界时判断
            if (index < 0) {
                // 下标小于0时，显示最后一张
                index = $(".dot li").length;
                // 联合图移动相应的距离
                $(".swiper").css({
                    left: -boxWidth * index
                })
                // 过渡作用
                index--;
            }
            if (index > $(".dot li").length) {
                // 下标大于小圆点下标时，显示第一张
                index = 0;
                $(".swiper").css({
                    left: 0
                });
                // 过渡作用
                index++;
            }
            // 判断是否是第五张 如果是第五张 把第一个点变为active状态
            $(".dot li").eq(index == $(".dot li").length ? 0 : index).addClass("active").siblings().removeClass("active");
            // 联合图轮播运动(向左挪)
            $(".swiper").stop().animate({
                left: -boxWidth * index
            }, function() {
                // 播到最后一张时，回到第一张
                if (index >= $(".dot li").length + 1) {
                    index = 0;
                    $(".swiper").stop().animate({
                        left: 0
                    })
                }
            })
        }
    })
</script>

</body>
</html>